<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>UbiNote Home.</title>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/ubi-editor.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/ubi-dialog.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/layout.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/widget-specified.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/widget-common.css" type="text/css" media="screen" />
<link rel="shortcut icon" href="imgs/favicon.png" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/jquery.layout.js"></script>
<script type="text/javascript" src="js/jquery.boxshadow.js"></script>
<script type="text/javascript" src="js/jquery.qtip.js"></script>
<script type="text/javascript" src="js/dragsort.js"></script>

<script type="text/javascript" src="js/nicEdit.js"></script>
<script type="text/javascript" src="js/nicEdit.citelink.js"></script>
<script type="text/javascript" src="js/ubi.tabs.js"></script>
<script type="text/javascript" src="js/ubi.notebook-view.js"></script>
<script type="text/javascript" src="js/ubi.block.js"></script>

<script type="text/javascript" src="js/ui.js"></script>
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript" src="js/ubi-dialog.js"></script>
<script type="text/javascript" src="js/note-view.js"></script>
<script type="text/javascript" src="js/key-shortcut.js"></script>
<script type="text/javascript" src="js/search_view.js"></script>
<script type="text/javascript" src="js/ubi-menu.js"></script>
<script type="text/javascript" src="js/untility.js"></script>
<script type="text/javascript" src="js/expander.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</head>
<body>
<div id="out-wrap">
    <div id="north-wrap" >
    <div id="header-logo"  class="out-frame float-left">
        <div id="title" class="float-left"></div>
    </div>
    <div id="header-toolbars" class="out-frame float-right">
        <!-- toolbars -->
        <div id="toolbars">
            <div id="search-bar" class="toolbar float-right">
                <div id="search-box-border" class="with-radius-border-10">
                    <input id="search-box"/>
                    <a id="search-btn" href="#"></a>
                </div>
            </div>
            <div id="note-edit-bar" class="toolbar" style="display:none;">
                <div id="note-edit-bar-btns"></div> <!--edit bar btns-->
            
            </div> <!-- format bar-->

            <div id="start-page-bar" class="toolbar">
            </div> 
   
            <div id="notebook-view-bar" class="toolbar">
                <ul class="toolbar-btns">
                    <li id="note-new-btn-wrap"
                        class="btn-base ic-new-notebook">
                    <a id="note-new-btn" href="#" class="btn-hlight" title="Create A New Notebook"></a>
                    </li>
                </ul>
            </div> <!---->

            <div id="note-view-bar" class="toolbar">
                <ul class="toolbar-btns">
                    <li id="note-view-save-btn-wrap" 
                        class="btn-base ic-save">
                        <a id="note-view-save-btn" title="Save All Notes."
                            href="#" class="btn-hlight"></a>
                    </li>

                    <li id="block-new-btn-wrap" 
                        class="btn-base ic-new-note">
                        <a id="block-new-btn" title="Create A New Note"
                            href="#" class="btn-hlight"></a>
                    </li>

                    <li id="more-actions-btn-wrap" 
                        class="btn-base ic-more-action">
                        <a id="more-actions-btn" title="More Actions"
                            href="#" class="btn-hlight"></a>
                        <div id="more-actions-menu" class="out-frame ubi-menu">
                            <ul class="ubi-menu-inner">
                            <li class="ubi-menu-item ubi-menu-item-fold">Fold Select</li>

                            <li class="ubi-menu-item ubi-menu-item-unfold">Unfold Select</li>
                            <li class="ubi-menu-item-separator"></li>
                            <li class="ubi-menu-item ubi-menu-item-select-all">Select All</li>
                            <li class="ubi-menu-item ubi-menu-item-disselect-all">Disselect All</li>
                            <li class="ubi-menu-item ubi-menu-item-invert-selection">Invert Selection</li>
                            <li class="ubi-menu-item-separator"></li>
                            <li class="ubi-menu-item-disable ubi-menu-item-copy">Cut</li>
                            <li class="ubi-menu-item-disable ubi-menu-item-copy">Copy</li>
                            <li class="ubi-menu-item-disable ubi-menu-item-paste">Paste</li>
                            <li class="ubi-menu-item-separator"></li>
                            <li class="ubi-menu-item ubi-menu-item-mass-add-tags">Mass Add Tags</li>
                            <li class="ubi-menu-item ubi-menu-item-delete">Delete Select</li>
                
                            </ul>
                        </div>
                    </li>
                </ul>
                <div id="edit-panel" class="with-radius-border-10 "></div>
            </div> <!-- note view bar -->
        </div> <!-- ubi-toolbars -->
    </div><!--header toolbars-->
    <div class="fixed"></div>
    <div id="center-top-border" class="out-frame">
       <!--WORKAROUND: http://code.google.com/p/ubinote/issues/detail?id=7--> 

    </div>

    </div><!-- north-wrap -->

    <div id="west-wrap">
        <div id="sidebar-wrap" class="out-frame">
            <div id="sidebar" >
            <ul id="view-switch">
                <li><a class="icon-view-switch-btn" href="#"></a></li>
                <li><a class="list-view-switch-btn" href="#"></a></li>
                <li><a class="gallery-view-switch-btn" href="#"></a></li>
            </ul>
            <!-- workaround about divided tabs and panels-->
            <div id="opened-list-expander">
                <div id="tabs-nav" class="sxui-expander-body">
                    <div id="tabs-btns" class="">
                        <ul class="in-frame-header ui-tabs-nav">
                            <li class="ui-corner-top"><a class="tab-label"  href="#start-page"><img src="imgs/icons/16x16/home.png"/></a></li>
                            <li class="ui-corner-top"><a class="tab-label"  href="#search-view"><img src="imgs/icons/16x16/search.png"/></a></li>
                            <li class="ui-corner-top"><a class="tab-label"  href="#notebook-view"><img src="imgs/icons/16x16/notebook.png"/></a></li>
                        </ul>
                    </div>
                </div><!-- tabs nav -->
            </div><!--opened list expander-->
            </div>
        </div>
    </div><!--sidebar wrap -->

    <div id="center-wrap" >

        <div id="content-wrap"  class="out-frame">
        <div id="content" class="in-frame">
            <div id="tabs" >       
                <ul class="in-frame-header" style="display:none">
                    <li><a href="#start-page"><img src="imgs/icons/16x16/home.png"/></a></li>
                    <li><a href="#search-view"><img src="imgs/icons/16x16/search.png"/></a></li>
                    <li><a href="#notebook-view"><img src="imgs/icons/16x16/notebook.png"/></a></li>
                </ul>
                
                <div id="start-page" class="content-view start-page">
                    <div id="start-page-content">
                    </div>
                </div> <!-- start page-->
                
                <div id="notebook-view" class="content-view notebook-view">
                    <div id="notebook-view-content"></div>
                </div> <!-- notebook view -->
                
                <div id="search-view" class="content-view search-view">
                    <div id="search-view-content"></div>
                </div> 

            </div><!--tabs-->
            <div class="float-fix"></div>
        </div>
        </div>
    </div>

    </div><!--center wrap-->
    <div id="south-wrap">
        
    </div><!--south wrap-->
    <div id="east-wrap">
        
    </div><!--south wrap-->
<!--</div>
</div>-->
<div id="notify-area"></div>
<div id="untility-bar" class="out-frame">
    <div id="filter-bar" >
        <div class="label float-left">Filter: </div> 
        <div id="filter-box-border" class="box-border">
            <input type="text" id="filter-box"/> 
            <a href="#" type="button" id="filter-clear-btn" title="clear the filter"></a>
        </div>
    </div>
    <div id="tray"></div>
</div>

</body>
</html>

